<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <ui:composition template="/WEB-INF/templates/common/admin.xhtml">
        <ui:define name="title">Cargo Administration</ui:define>
        <ui:define name="content">
            <f:metadata>
                <f:viewParam name="trackingId"
                             value="#{itinerarySelection.trackingId}" />
                <f:viewAction action="#{itinerarySelection.load}" />
            </f:metadata>
            <div class="row">
                <div class="large-10 columns">
                    <div id="container" class="panel">
                        <table>
                            <span class="label">Select route</span>
                            <tr>
                                <td>Cargo #{itinerarySelection.cargo.trackingId} is going from
                                    ${itinerarySelection.cargo.origin} to
                                    ${itinerarySelection.cargo.finalDestination}</td>
                            </tr>
                        </table>
                        <h:panelGroup rendered="#{empty itinerarySelection.routeCandidates}">
                            <p>No routes found that satisfy the route specification. Try
                                setting an arrival deadline further into the future (a few weeks at
                                least).</p>
                        </h:panelGroup>
                        <ui:repeat value="#{itinerarySelection.routeCandidates}"
                                   var="itinerary" varStatus="itineraryStatus">
                            <h:form>
                                <table>
                                    <span class="success label">Route candidate #{itineraryStatus.index + 1}</span>
                                    <thead>
                                        <tr>
                                            <td>Voyage</td>
                                            <td>From</td>
                                            <td></td>
                                            <td>To</td>
                                            <td></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <ui:repeat value="#{itinerary.legs}" var="leg"
                                                   varStatus="legStatus">
                                            <tr>
                                                <td>#{leg.voyageNumber}</td>
                                                <td>#{leg.from}</td>
                                                <td>#{leg.loadTime}</td>
                                                <td>#{leg.to}</td>
                                                <td>#{leg.unloadTime}</td>
                                            </tr>
                                        </ui:repeat>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="3">
                                                <p>
                                                    <h:commandButton value="Assign cargo to this route"
                                                                     action="#{itinerarySelection.assignItinerary(itineraryStatus.index)}" />
                                                </p>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </h:form>
                        </ui:repeat>
                    </div>
                </div>
            </div>
        </ui:define>
    </ui:composition>
</html>